import React, { Component } from 'react'

import { Row, Col, Divider, Radio } from 'antd';
import { connect } from 'dva';
import Charge_Icon from '@/assets/images/icon/charge.png'
import { Text } from './styled';
import { Ceil } from '@/components/Ceil';
import Link from 'umi/link';
import styles from './style.css';
import { checkInit } from '@/utils/util';

import { SingleTable } from '@/components/Chart/Table';
import { SingleBar } from '@/components/Chart/Bar';

interface IProps {
  dispatch?: Function;
}

interface IProps {
  dispatch?: Function;
  children?: React.ReactNode;
  loading: boolean;
  statistics?: {
    siteTotal?: number;
    chargingPortTotal?: number;
    chargingTotalDetail?: {
      chargingTotal?: Array<number>;
      chargingNormalTotal?: Array<number>;
      chargingErrorTotal?: Array<number>;
    };
    chargingUseDetail?: {
      chargingPortTotal?: number;
      chargingUsedTotal?: number;
      chargingFreeTotal?: number;
      chargingUseRate?: number;
    };
  };
  chargingBar?: {
    deviceAlarmState?: Array<any>;
    deviceAlarmStateName?: Array<any>;
    deviceAlarmStateToday?: Array<any>;
    deviceAlarmStateYesterday?: Array<any>;
  }
}

@connect(({ analyse_charge, loading }) => ({
  statistics: analyse_charge.statistics || {},
  chargingBar: analyse_charge.chargingBar || {},
  loading: loading.effects['analyse_charge/chargingStatistics'],
}))
class Charge extends Component<IProps> {

  state = {
    mode: 1,
  }

  queryData() {
    const { dispatch } = this.props;
    dispatch({ type: 'analyse_charge/chargingStatistics' }).then(() => {
      const { statistics = {} } = this.props;
      const { chargingTotalDetail = {}, chargingUseDetail = {} } = statistics;
      const normal = Array.isArray(chargingTotalDetail.chargingNormalTotal) &&
        chargingTotalDetail.chargingNormalTotal.length === 2 ?
        chargingTotalDetail.chargingNormalTotal[1] : 0;
      const error = Array.isArray(chargingTotalDetail.chargingErrorTotal) &&
        chargingTotalDetail.chargingErrorTotal.length === 2 ?
        chargingTotalDetail.chargingErrorTotal[1] : 0;
      const use = chargingUseDetail.chargingUsedTotal;
      const free = chargingUseDetail.chargingFreeTotal;
      SingleTable({
        hiddenLeble: true,
        list: ['正常充电', '异常充电'],
        radius: ['30%', '50%'],
        count: [{ value: normal, name: '正常充电' }, { value: error, name: '异常充电' }],
        colors: ['#3B86FE', '#FFB53E'],
        ref: this.refs.time,
      });
      SingleTable({
        hiddenLeble: true,
        radius: ['30%', '50%'],
        count: [{ value: use, name: '使用中' }, { value: free, name: '空闲' }],
        colors: ['#3B86FE', '#FFB53E'],
        ref: this.refs.rate,
      });
    })
  }

  queryChargingBar(type) {
    const { dispatch } = this.props;
    const { mode } = this.state;
    dispatch({
      type: 'analyse_charge/queryChargingBar',
      payload: {
        chargingTimeType: type
      }
    }).then(() => {
      const { chargingBar = {} } = this.props;
      SingleBar({
        dataX: chargingBar.deviceAlarmStateName,
        dataY: chargingBar.deviceAlarmStateToday,
        dataYAfter: chargingBar.deviceAlarmStateYesterday,
        nameX: '类型',
        nameY: '数量',
        legend: mode === 1 ? ['今日', '昨日'] : mode === 2 ? ['本周', '上周'] : ['本月', '上月'],
        ref: this.refs.bar,
        color: '#3B86FE',
        barWidth: 40,
        gap: [0, 0]
      });
    })
  }

  componentDidMount() {
    checkInit();

    this.queryData();
    this.queryChargingBar(1);

  }

  handleModeChange = (e) => {
    const mode = e.target.value;
    this.setState({ mode }, () => this.queryChargingBar(mode));
  }

  render() {
    const { mode } = this.state;
    const { statistics = {} } = this.props;
    const { siteTotal, chargingPortTotal, chargingTotalDetail = {}, chargingUseDetail = {} } = statistics;
    const chargingTotal = Array.isArray(chargingTotalDetail.chargingTotal) && chargingTotalDetail.chargingTotal.map(item => (
      `${item}次`
    ))
    const chargingNormalTotal = Array.isArray(chargingTotalDetail.chargingNormalTotal) && chargingTotalDetail.chargingNormalTotal.map(item => (
      `${item}次`
    ))
    const chargingErrorTotal = Array.isArray(chargingTotalDetail.chargingErrorTotal) && chargingTotalDetail.chargingErrorTotal.map(item => (
      `${item}次`
    ))
    return (
      <>
        <Row style={{ height: '25vh', margin: '25px 30px' }}>
          <Col span={4} style={{ marginTop: '25px' }}>
            <Row>
              <Col span={7}><img width={'95%'} src={Charge_Icon}></img></Col>
              <Col span={17} style={{
                position: 'absolute',
                left: '30%',
                transform: 'translate(0, -50%)',
                top: '50%'
              }}>
                <Text>{`站点数: ${siteTotal || 0}处`}</Text>
                <Text>{`充电口总数: ${chargingPortTotal || 0}个`}</Text>
              </Col>
            </Row>
          </Col>
          <Col span={10}>
            <Row>
              <Col span={12}>
                <div ref='time' style={{ width: '100%', height: '120%' }}></div>
              </Col>
              <Col span={12}>
                <Ceil
                  heads={[<Link to="/data/analyse_charge/exception">查看明细</Link>, '昨日', '今日']}
                  subHeads={['充电次数', "正常次数", "异常次数"]}
                  data={[chargingTotal, chargingNormalTotal, chargingErrorTotal]}
                />
              </Col>
            </Row>
          </Col>
          <Col span={10}>
            <Row>
              <Col span={12}>
                <div ref='rate' style={{ width: '100%', height: '120%' }}></div>
              </Col>
              <Col span={12}>
                <Ceil
                  heads={[<Link to="/data/analyse_charge/use">查看明细</Link>, '今日']}
                  subHeads={['充电口总数', "已使用", "空闲", "充电口使用率"]}
                  data={[[`${chargingUseDetail.chargingPortTotal || 0}个`], [`${chargingUseDetail.chargingUsedTotal || 0}次`], [`${chargingUseDetail.chargingFreeTotal || 0}次`], [`${chargingUseDetail.chargingUseRate || 0}%`]]}
                />
              </Col>
            </Row>
          </Col>
        </Row>
        <Divider type="horizontal" />
        <Row style={{ height: '45vh', margin: '25px 30px' }}>
          <Radio.Group className={styles.radioGroup} onChange={this.handleModeChange} value={mode} buttonStyle="solid">
            <Radio.Button value={1}>日</Radio.Button>
            <Radio.Button value={2}>周</Radio.Button>
            <Radio.Button value={3}>月</Radio.Button>
          </Radio.Group>
          <p style={{ position: 'absolute', left: '40%', fontSize: '18px', color: '#444444' }}>充电结束原因</p>
          <div ref='bar' style={{ width: '100%', height: '100%' }}></div>
        </Row>
      </>
    )
  }
}

export default Charge;
